import React from 'react';
import { Modal, Form, Switch, Radio, Space, Divider } from 'antd';
import styles from './MessageSettings.module.less';

interface MessageSettingsProps {
  visible: boolean;
  onClose: () => void;
}

const MessageSettings: React.FC<MessageSettingsProps> = ({
  visible,
  onClose
}) => {
  const [form] = Form.useForm();

  return (
    <Modal
      title="消息设置"
      open={visible}
      onOk={() => {
        form.validateFields().then(values => {
          console.log(values);
          onClose();
        });
      }}
      onCancel={onClose}
      width={560}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          verification: true,
          correction: true,
          system: true,
          sound: true,
          desktop: false,
          frequency: 'realtime'
        }}
      >
        <h3>接收设置</h3>
        <Form.Item label="验收通知" name="verification" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="整改通知" name="correction" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="系统通知" name="system" valuePropName="checked">
          <Switch />
        </Form.Item>

        <Divider />

        <h3>提醒方式</h3>
        <Form.Item label="声音提醒" name="sound" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="桌面通知" name="desktop" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="推送频率" name="frequency">
          <Radio.Group>
            <Space direction="vertical">
              <Radio value="realtime">实时推送</Radio>
              <Radio value="hourly">每小时推送</Radio>
              <Radio value="daily">每日汇总</Radio>
            </Space>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default MessageSettings; 